<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import FloatButton from "./FloatButton.svelte";
    import { fn } from "storybook/test";
    import Icon from "@iconify/svelte";
    import FloatButtonGroup from "./FloatButtonGroup.svelte";

    const { Story } = defineMeta({
        title: "Components/Other/FloatButton",
        component: FloatButton,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <div style="height: 300px;">
            <FloatButton>
                {#snippet icon()}
                    <Icon icon="f7:ant-fill" />
                {/snippet}
            </FloatButton>
        </div>
    {/snippet}
</Story>

<Story name="Type">
    {#snippet template(args)}
        <div style="height: 300px;">
            <FloatButton>
                {#snippet icon()}
                    <Icon icon="f7:question-circle" />
                {/snippet}
            </FloatButton>
            <FloatButton style="right: 94px;" type="primary">
                {#snippet icon()}
                    <Icon icon="f7:question-circle" />
                {/snippet}
            </FloatButton>
        </div>
    {/snippet}
</Story>

<Story name="Shape">
    {#snippet template(args)}
        <div style="height: 300px;">
            <FloatButton type="primary">
                {#snippet icon()}
                    <Icon icon="f7:question-circle" />
                {/snippet}
            </FloatButton>
            <FloatButton style="right: 94px;" type="primary" shape="square">
                {#snippet icon()}
                    <Icon icon="f7:question-circle" />
                {/snippet}
            </FloatButton>
        </div>
    {/snippet}
</Story>

<Story name="Desc">
    {#snippet template(args)}
        <div style="height: 300px;">
            <FloatButton style="right: 164px;" type="primary" shape="square">
                {#snippet icon()}
                    <Icon icon="f7:question-circle" />
                {/snippet}
                {#snippet description()}
                    HELP
                {/snippet}
            </FloatButton>

            <FloatButton style="right: 94px;" type="primary" shape="square">
                {#snippet description()}
                    HELP INFO
                {/snippet}
            </FloatButton>

            <FloatButton shape="square">
                {#snippet icon()}
                    <Icon icon="f7:question-circle" />
                {/snippet}
                {#snippet description()}
                    HELP INFO
                {/snippet}
            </FloatButton>
        </div>
    {/snippet}
</Story>

<Story name="Badge">
    {#snippet template(args)}
        <div style="height: 300px;">
            <FloatButton badge={{ dot: true, offset: [5, 5] }}>
                {#snippet icon()}
                    <Icon icon="f7:question-circle" />
                {/snippet}
            </FloatButton>

            <FloatButton style="right: 94px;" badge={{ count: 5, offset: [3, 3] }}>
                {#snippet icon()}
                    <Icon icon="f7:question-circle" />
                {/snippet}
            </FloatButton>
        </div>
    {/snippet}
</Story>

<Story name="Tooltip">
    {#snippet template(args)}
        <div style="height: 300px;">
            <FloatButton tooltip="Documents">
                {#snippet icon()}
                    <Icon icon="f7:question-circle" />
                {/snippet}
            </FloatButton>
        </div>
    {/snippet}
</Story>

<Story name="Group">
    {#snippet template(args)}
        <div style="height: 300px;">
            <FloatButtonGroup>
                <FloatButton tooltip="Documents">
                    {#snippet icon()}
                        <Icon icon="f7:question-circle" />
                    {/snippet}
                </FloatButton>
                <FloatButton>
                    {#snippet icon()}
                        <Icon icon="f7:doc-text" />
                    {/snippet}
                </FloatButton>
            </FloatButtonGroup>

            <FloatButtonGroup shape="square" style="right: 94px;">
                <FloatButton tooltip="Documents">
                    {#snippet icon()}
                        <Icon icon="f7:question-circle" />
                    {/snippet}
                </FloatButton>
                <FloatButton>
                    {#snippet icon()}
                        <Icon icon="f7:doc-text" />
                    {/snippet}
                </FloatButton>
            </FloatButtonGroup>
        </div>
    {/snippet}
</Story>

<Story name="Trigger">
    {#snippet template(args)}
        <div style="height: 300px;">
            <FloatButtonGroup trigger="hover">
                {#snippet icon()}
                    <Icon icon="f7:square-list" />
                {/snippet}
                <FloatButton tooltip="Documents">
                    {#snippet icon()}
                        <Icon icon="f7:question-circle" />
                    {/snippet}
                </FloatButton>
                <FloatButton>
                    {#snippet icon()}
                        <Icon icon="f7:doc-text" />
                    {/snippet}
                </FloatButton>
            </FloatButtonGroup>

            <FloatButtonGroup trigger="click" style="right: 94px;">
                {#snippet icon()}
                    <Icon icon="f7:square-list" />
                {/snippet}
                <FloatButton tooltip="Documents">
                    {#snippet icon()}
                        <Icon icon="f7:question-circle" />
                    {/snippet}
                </FloatButton>
                <FloatButton>
                    {#snippet icon()}
                        <Icon icon="f7:doc-text" />
                    {/snippet}
                </FloatButton>
            </FloatButtonGroup>
        </div>
    {/snippet}
</Story>
